<template>
  <Modal
    v-model:active="meshQualityModalActive"
    title="网格质量检查"
    :width="750"
    :height="550"
    draggable
    transfer
    hide-mask
  >
    <NativeScroll use-y-bar height="100%" scroll-style="padding: 24px;">
      <!-- <Row :gap="[8]">
        <Column :span="24"> -->
      <Table :data="qualityParameters" :border="true">
        <TableColumn id-key="name" name="质量类型" :width="200"></TableColumn>
        <TableColumn
          id-key="color"
          name="显示颜色"
          text-align="center"
          :width="100"
        >
          <template #default="{ row }">
            <div
              class="color-block"
              :style="{ backgroundColor: row.color }"
            ></div>
          </template>
        </TableColumn>
        <TableColumn id-key="threshold" name="阀值" text-align="center">
          <template #default="{ row }">
            <Input
              class="w-100"
              v-model:value="row.threshold"
              placeholder="Enter threshold"
              size="small"
            ></Input>
          </template>
        </TableColumn>
        <TableColumn name="Bad count" text-align="center">
          <template #default="{ row }">
            {{ row.badId.length }}
          </template>
        </TableColumn>
        <TableColumn id-key="action" name="Action" :width="200">
          <template #default="{ row }">
            <Button type="default" @click="check(row)" size="small" no-pulse
              >检查</Button
            >
            <Button
              type="default"
              @click="showResult(row)"
              size="small"
              no-pulse
              >结果</Button
            >
          </template>
        </TableColumn>
      </Table>
    </NativeScroll>
  </Modal>
</template>

<script lang="ts" setup>
import {
  Modal,
  Checkbox,
  Button,
  NativeScroll,
  Message,
  Table,
  TableColumn,
  Input,
  Toast,
  Notice,
} from "cax-ui";
import { ref, reactive, computed, defineExpose } from "vue";
import { useCoreStore, _global } from "@/UI/store";
import { storeToRefs } from "pinia";

const coreStore = useCoreStore();
const { meshQualityModalActive } = storeToRefs(coreStore);
const loading = ref(false);

const qualityParameters = reactive([
  {
    name: "aspect ratio",
    checked: false,
    color: "#FFFF00",
    threshold: 2,

    badId: [],
  },
  {
    name: "aspect(HM)",
    checked: false,
    color: "#FFFF00",
    threshold: 5,

    badId: [],
  },
  {
    name: "vol skew(HM)",
    checked: false,
    color: "#7FFF00",
    threshold: 0.95,

    badId: [],
  },
  {
    name: "cell squish",
    checked: false,
    color: "#8FBC8F",
    threshold: 0.9,

    badId: [],
  },
  {
    name: "equia skew",
    checked: false,
    color: "#90EE90",
    threshold: 0.9,

    badId: [],
  },
  {
    name: "tet collapse",
    checked: false,
    color: "#9370DB",
    threshold: 0.1,

    badId: [],
  },
  {
    name: "angle difference",
    checked: false,
    color: "#FF4500",
    threshold: 15,

    badId: [],
  },
  {
    name: "jacob ratio(corner)",
    checked: false,
    color: "#0000CD",
    threshold: 0.7,

    badId: [],
  },
  {
    name: "jacob ...",
    checked: false,
    color: "#0000FF",
    threshold: 0.7,

    badId: [],
  },
  {
    name: "min angle",
    checked: false,
    color: "#FFA500",
    threshold: 20,

    badId: [],
  },
  {
    name: "max angle",
    checked: false,
    color: "#E9967A",
    threshold: 120,

    badId: [],
  },
  {
    name: "min length",
    checked: false,
    color: "#FF0000",
    threshold: 7.5,

    badId: [],
  },
  {
    name: "max length",
    checked: false,
    color: "#FF69B4",
    threshold: 20,

    badId: [],
  },
  {
    name: "min elem size",
    checked: false,
    color: "#DDA0DD",
    threshold: 0,

    badId: [],
  },
  {
    name: "max elem size",
    checked: false,
    color: "#FFB6C1",
    threshold: 0,

    badId: [],
  },
  {
    name: "average length",
    checked: false,
    color: "#800080",
    threshold: 0,

    badId: [],
  },
  {
    name: "min height",
    checked: false,
    color: "#48D1CC",
    threshold: 0,

    badId: [],
  },
]);

function check(row: any) {
  console.log(row);
  Toast.loading({
    message: "正在检查网格质量...",
    duration: -1,
  });
  _global.Engine.mesh
    .quality(row.name, +row.threshold)
    .then((result: any) => {
      console.log("Mesh quality check result:", result);
      Toast.close();
      if (result.Result === "empty") {
        Message.success("通过检查");
        return;
      }
      const t: any = [];
      result.Result.qualities.forEach((v: any, index: number) => {
        if (index % 2 === 0) {
          t.push(v);
        }
      });
      row.badId = t;
    })
    .catch((err: any) => {
      Toast.close();
    });
}

const resetCheck = () => {
  qualityParameters.forEach((item) => {
    item.checked = false;
    item.badId = [];
  });
};

function showResult(row: any) {
  Notice.success({
    title: "Bad elements Id",
    content: row.badId.join(", "),
    closable: true,
    duration: -1,
  });
}

defineExpose({
  resetCheck,
});
</script>

<style lang="less" scoped>
.color-block {
  width: 60px;
  height: 20px;
  border: 1px dashed var(--cax-border-color);
  margin: 0 auto;
}

.button-row {
  margin-top: 20px;
}

.button-group {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>
